﻿
@using (Ajax.BeginForm("YourAction", "QLHeThong", new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data" }))
{
    @Html.AntiForgeryToken()
    <input type="text" name="MaTheLoai"><br>
    <input type="text" name="TenTheLoai"><br>
    <input type="file" name="files" multiple><br>
    <input type="submit" value="Upload File to Server">
}
<br />
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success">0%</div>
</div>

<div id="status"></div>

<script src="http://malsup.github.com/jquery.form.js"></script>


<script>
    (function ()
    {

        var bar = $('.progress-bar');
        var percent = $('.progress-bar');
        var status = $('#status');

        $('form').ajaxForm({
            beforeSend: function ()
            {
                status.empty();
                var percentVal = '0%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            uploadProgress: function (event, position, total, percentComplete)
            {
                var percentVal = percentComplete + '%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            success: function ()
            {
                var percentVal = '100%';
                bar.width(percentVal)
                percent.html(percentVal);
            },
            complete: function (xhr)
            {
                status.html(xhr.responseText);
            }
        });

    })();
</script>